<template>
	<view class="list_h">
		<view class="label">
			<view class="xing">
				团队名称
			</view>
			<view>
				<input placeholder-style="color:#bbbbbb;font-size:28rpx" v-model="props.info.name"
					placeholder="请输入团队名称" />
			</view>
		</view>
		<view class="label">
			<view class="xing">
				团队简称
			</view>
			<view>
				<input placeholder-style="color:#bbbbbb;font-size:28rpx" v-model="props.info.abbreviation"
					placeholder="请输入团队名称" />
			</view>
		</view>
		<view class="label">
			<view class="xing">
				团队联系人
			</view>
			<view>
				<input placeholder-style="color:#bbbbbb;font-size:28rpx" v-model="props.info.team"
					placeholder="请输入团队联系人" />
			</view>
		</view>
		<view class="label">
			<view class="xing">
				联系电话
			</view>
			<view>
				<input placeholder-style="color:#bbbbbb;font-size:28rpx" v-model="props.info.mobile"
					placeholder="请输入联系电话" />
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	const props = defineProps({
		info: {
			type: Object,
			default() {
				return {}
			}
		}
	})

	console.log(props.info)
</script>

<style lang="scss" scoped>
	.list_h {
		padding: 20rpx;
		border-radius: 20rpx;

		.label {
			display: flex;
			align-items: flex-start;
			border-bottom: 1px solid #d6d6cf;
			padding-bottom: 35rpx;
			padding-top: 35rpx;

			&:last-child {
				border: none;
				padding-bottom: 0rpx;
			}
		}

		.xing {
			width: 220rpx;
			height: 40rpx;
			font-size: 28rpx;

			&:before {
				content: '*';
				color: #e6425e;
				font-size: 28rpx;
				margin-left: 5rpx;
				margin-right: -6rpx;
			}
		}

		input {
			flex: 1;
			margin-left: 44rpx;
		}
	}

	.listDis {
		padding: 20rpx;
		border-radius: 20rpx;
		height: 280rpx;
		background: #FFFFFF;
	}
</style>